<template>
    <van-nav-bar :title="videoData.authorId+'的视频'" left-arrow @click-left="onClickLeft" />
    <div class="video-container" @click="togglePlay">
        <video ref="videoRef" controls width="100%" height="100%">
            <source :src="videoData.src" :type="videoData.type">
        </video>
        <!--视频封面和播放按钮 叠加在一起-->
        <div v-if="!showOverlay" class="play-overlay">
            <!-- 视频封面 -->
            <img :src="videoData.cover" alt="视频封面" class="video-cover">
            <!-- 视频播放按钮 -->
            <div class="play-button">
                <van-icon name="play-circle" size="40px" />
            </div>
        </div>
    </div>
    <div style="font-size: 23px; font-weight: 700; text-align: center; margin-top: 5px;">216次碰撞，36车封闭高速路，生还率仅有？%</div>
    <div style="margin-left: 10px;
        margin-left: 25px;
        padding-top: 10px;
        color: #bec4c2;
        font-size: 14px;">
        
        <span>{{ videoData.authorId }} |</span><span>{{ videoData.viewCount }}万播放</span><span>{{
            videoData.createdTime}}发布</span>
    
    </div>
    <h3 style="margin-top: 10px;">相关阅读</h3>
    <!--循环数据展示 所有视频数据-->
    <van-row v-for="item in videolist" :key="item.id" @click="onVideos(item.id)" style="margin-bottom: 10px;">
        <van-col span="17">
            <div style="text-align: left; font-size: 18px; padding-left: 10px; margin-top: 10px;">
                {{ item.videoName }}</div>
            <div style="margin-left: 10px;
        margin-left: 25px;
        padding-top: 10px;
        color: #bec4c2;
        font-size: 14px;">
                <span>{{ item.authorId }} |</span><span>{{ item.viewCount}}万播放</span><span>{{
    item.createdTime}}发布</span>
            </div>
        </van-col>
        <van-col span=" 7">
            <video controls width="130px" height="75px">
                <source :src="item.videoUrl" type="video/mp4">
            </video>
        </van-col>
    </van-row>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">车友圈</van-tabbar-item>
        <van-tabbar-item icon="friends-o">选车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">二手车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" url="https://chat.deepseek.com/">服务</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>

import { VideosApi } from '../../api';
import { onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const videoRef = ref(null);
// 控制封面和播放按钮的显示隐藏
const showOverlay = ref(false);

const videoData = reactive({
    id: 1,
    vname: '视频名称',
    authorId:'',
    src: 'http://www.hphs.com/mp4/qcsp.mp4',
    type: 'video/mp4',
    cover: 'http://www.hphs.com/images/video1.png',
    viewCount: '',
    createdTime:''

})

//切换播放/暂停状态
const togglePlay = () => {
    // alert('切换播放/暂停状态');
    //如果视频处于暂时状态
    if (videoRef.value.paused) {
        //播放视频，隐藏封面和播放按钮
        videoRef.value.play();
        showOverlay.value = false;
    } else {
        //暂停视频，显示封面和播放按钮
        videoRef.value.pause();
        showOverlay.value = true;
    }

}
let id = ref()
onMounted(() => { 
    
    videoData.id  = route.query.id
    callVideosApi()
    //视频列表数据
    callVideosList()
})

const callVideosApi = () => { 
    
    VideosApi.select.call({ id: videoData.id }).then(res => { 
        console.log(res);
        let result = res[0]
        videoData.vname = result.videoName
        videoData.authorId = result.authorId
        videoData.src = result.videoUrl
        videoData.cover = result.coverUrl
        videoData.viewCount = result.viewCount
        videoData.createdTime = result.createdTime
    })
}
//定义商品列表数据
const videolist = ref([])
const callVideosList = () => { 
    VideosApi.select.call().then(res => { 
        console.log(res);
        videolist.value = res
    })
}

const onVideos = (id) => { 
    console.log('点击了视频', id);
    //数据没有更新
    // router.push({ name: 'moveVideo', query: { id: id } })
    // location.href方法将页面重定向到当前页面的URL
    location.href = '/moveVideo?id=' + id



}
const onClickLeft = () => history.back();
</script>

<style scoped>
.video-container {
    /* //定位 */
    position: relative;
    /* width: 100%;
    height: 300px; */
    background-color: #000;

    video {
        display: block;
        /* 针对img video的样式 主要是根据内容的尺寸来适配容器的大小，保持内容的宽高比不变。 */
        object-fit: cover;
    }
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    /* 确保在视频上方 */
}

/* //视频封面 */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    /* 保持比例填充容器 */
}

/* 播放按钮 */
.play-button {
    position: absolute;
    top: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #000;
    border-radius: 20px;

}
</style>